<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>学生信息查询</title>
    <link rel="stylesheet" href="../css/info_edit.css">
</head>
<body>
    <div class="container">
        <h2 style="text-align: center; color: #333;">学生信息录入</h2>

        <!-- 搜索栏 -->
        <div class="search-bar">
            <label>根据学号查询学生信息：</label>
            <input type="text" id="studentId" placeholder="请输入学号" value="081107">
            <button id="queryBtn">查找</button>
        </div>

        <!-- 学生信息表格 -->
        <table>
            <tr>
                <th>学号：</th>
                <td><input type="text" id="id" value="081107" readonly></td>
            </tr>
            <tr>
                <th>姓名：</th>
                <td><input type="text" id="name" value="王林" placeholder="请输入姓名"></td>
            </tr>
            <tr>
                <th>性别：</th>
                <td>
                    <input type="radio" name="gender" value="男" checked> 男
                    <input type="radio" name="gender" value="女"> 女
                </td>
            </tr>
            <tr>
                <th>出生日期：</th>
                <td><input type="date" id="birth" value="2000-02-10"></td>
            </tr>
            <tr>
                <th>专业：</th>
                <td><input type="text" id="major" value="计算机" placeholder="请输入专业"></td>
            </tr>
            <tr>
                <th>总学分：</th>
                <td><input type="number" id="credit" value="50" placeholder="请输入总学分" min="0"></td>
            </tr>
            <tr>
                <th>备注：</th>
                <td><textarea id="remark" placeholder="请输入备注信息" style="width: 100%; min-height: 60px; resize: vertical;"></textarea></td>
            </tr>
            <tr>
                <th>照片：</th>
                <td>
                    <div class="photo-container" style="display: flex; align-items: center; gap: 10px;">
                        <div class="photo-preview">
                            <img id="photoPreview" src="../images/默认头像.png" alt="学生照片" style="width: 80px; height: 100px; object-fit: cover; border: 1px solid #ccc;">
                        </div>
                        <div>
                            <input type="file" id="photoUpload" accept="image/*" style="display: none;">
                            <button class="photo-btn" id="photoBtn" type="button">选择文件</button>
                            <br>
                            <small id="fileName">未选择任何文件</small>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <th>操作：</th>
                <td>
                    <div class="btn-group" style="display: flex; gap: 8px; flex-wrap: wrap;">
                        <button id="modifyBtn" type="button">修改</button>
                        <button id="addBtn" type="button">添加</button>
                        <button id="deleteBtn" type="button">删除</button>
                        <button id="clearBtn" type="button">清空</button>
                        <button id="exitBtn" type="button">退出</button>
                    </div>
                </td>
            </tr>
        </table>
    </div>

    <script type="module" src="../js/info_edit.js"></script>
</body>
</html>